<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
</head>
<body>
      <div class="container">
            <div class="control">
                  <button>选项1</button>
                  <button>选项2</button>
                  <button>选项3</button>
            </div>
            <div class="content">
                  <div class="box">内容1</div>
                  <div class="box">内容2</div>
                  <div class="box">内容3</div>
            </div>
      </div>

      <!-- <div class="container">
            <div class="control1">
                  <button>选项1</button>
                  <button>选项2</button>
                  <button>选项3</button>
            </div>
            <div class="content">
                  <div class="box1">内容1</div>
                  <div class="box1">内容2</div>
                  <div class="box1">内容3</div>
            </div>
      </div> -->
      <script>
      // OO  : 面向对象;
      // OOA : 面向对象分析;
      // OOD : 面向对象设计;
      // function Table(){
      //    //    this.btns
      //    //    this.contents
      //    //    索引
      //    //    this.index;
      // }
      // // 事件绑定功能;
      // Table.prototype.bindEvent = function(){
      // }
      // // 切换内容功能;
      // Table.prototype.changeTable = function(){
      // }
      // OOP : 面向对象编程;
      // 1. 如果数据在后面原型对象之中需要应用;
      // 那么我就要把这个数据放在this之中;
      // 复用 ;
      // 2. 所有的this指向都要指向实例对象; 
      
      function Table( btn_selector , content_selector){
         // 这是按钮选择;
         this.btns = document.querySelectorAll(btn_selector);
         // 这是内容选择;
         this.contents = document.querySelectorAll( content_selector )
         //  this.contents
         //  索引
         this.index = 0;
         // 数据初始化结束，再去调用功能;
         this.bindEvent();
      }
      // 事件绑定功能;
      Table.prototype.bindEvent = function(){
            // 指向实例对象的this 取个 别名 self ;
            var self = this;
            // 测试this指向是否指向实例对象;
            // console.log(this);
            for(var i = 0 ; i < self.btns.length ; i ++){
                  // 给dom对象绑定下标;
                  self.btns[i].index = i;

                  self.btns[i].onclick = function(){
                        // this => 当前发生事件的dom对象;
                        // console.log(this.index);
                        // this.index => 当前发生事件的dom的下标;
                        // self.index => 实例对象里面记录那个元素应该显示的下标
                        
                        self.index = this.index;
                  }
            }
      }
      // 切换内容功能;
      Table.prototype.changeTable = function(){
      }

      var tab1 = new Table(".control button" , ".box");
      
      </script>      
</body>
</html>